@(title: String)(content: Html)(divisiongauche:Html)

<!DOCTYPE html>

<html>
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap.css")">
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
               
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
        <script src="@routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/tab.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/dropdown.js")" type="text/javascript"></script>
		<script src="@routes.Assets.at("javascripts/modal.js")" type="text/javascript"></script>
		
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	
    </head>
    <body>
		<div class="navbar navbar-static-top">
			<div class="navbar-inner">
				<div class="container-fluid">
					<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</a>
					<a class="brand" href="@routes.Accueil.index()" name="top">Open Data Project.</a>
					<div class="nav-collapse collapse">
						<ul class="nav">
							<li ><a href="@routes.Accueil.index()"><i class="fa fa-home"></i> Accueil</a></li>
							<li class="divider-vertical"></li>
							<li ><a href="@routes.Oeuvre.index()"><i class="fa fa-book"></i> Oeuvres</a></li>
							<li class="divider-vertical"></li>
							
							
						</ul>
						<ul class="nav pull-right">
							<li><a href="@routes.Inscription.inscrire()"><i class="fa fa-plus-square"></i> Inscription</a></li>
		                  	<li class="divider-vertical"></li>
							<li class="dropdown">
								<a class="dropdown-toggle" href="#" data-toggle="dropdown"><i class="fa fa-power-off"></i>Connecter <strong class="caret"></strong></a>
								<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
									<form method="post" action="login" accept-charset="UTF-8">
										<input style="margin-bottom: 15px;" type="text" placeholder="Username" id="username" name="username">
										<input style="margin-bottom: 15px;" type="password" placeholder="Password" id="password" name="password">
										<input style="float: left; margin-right: 10px;" type="checkbox" name="remember-me" id="remember-me" value="1">
										<label class="string optional" for="user_remember_me"> Remember me</label>
										<input class="btn btn-primary btn-block" type="submit" id="sign-in" value="Sign In">
										<label style="text-align:center;margin-top:5px">or</label>
		                                <input class="btn btn-primary btn-block" type="button" id="sign-in-google" value="Sign In with Google">
										<input class="btn btn-primary btn-block" type="button" id="sign-in-twitter" value="Sign In with Twitter">
									</form>
								</div>
							</li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				</div>
				<!--/.container-fluid -->
			</div>
			<!--/.navbar-inner -->
		</div>
		<!--/.navbar -->
		<!-- 
		<script>
		$(document).ready(function()
		{
		  //Handles menu drop down
		  $('.dropdown-menu').find('form').click(function (e) {
		        e.stopPropagation();
		        });
		  });
		</script>
        -->
        
       <!-- ************************************************************************   -->
		
		<div class="container" >
  			@content
  			
		</div>
    
       <!-- ************************************************************************   -->
	  	
	  	<div class="container">
	  		@divisiongauche
	  	</div>
	  	<br><br>
	   <!-- ************************************************************************   -->
        <div  id="idfooter" style="position: relative;">
      		<div class="container">	
				<div class="row-fluid">
							<div class="span12" style="padding-top:5px;">
								<div class="span4" style="width: 20%;padding-left:50px;">
									<ul class="unstyled">
										<li><p class="muted">Projet Open Data</p><li>
										<li><a href="#">Equipe</a></li>
										<li><a href="#">Theme du projet</a></li>
										<li><a href="#">Contact & support</a></li>
										
									</ul>
								</div>
								
								<div class="span2" style="width: 15%;">
									<ul class="unstyled">
										<li><p class="muted">Services</p><li>
										<li><a href="#">Recherche d'un livre</a></li>
										<li><a href="#">Partage sur les reseaux sociaux</a></li>
										<li><a href="#">Notation des livres</a></li>
										<li><a href="#">Conseils de lecture </a></li>							
									</ul>
								</div>
								<div class="span2" style="width: 15%;">
									<ul class="unstyled">
										<li><p class="muted">Documentation</p><li>
										<li><a href="#">Utilisation de l'Application</a></li>
										<li><a href="#">Developer API</a></li>
										<li><a href="#">Product Markdown</a></li>
										<li><a href="#">Product Pages</a></li>							
									</ul>
								</div>	
								<div class="span2" style="width: 15%;">
									<ul class="unstyled">
										<li><p class="muted">Framework Play</p><li>
										<li><a href="#">Installation</a></li>
										<li><a href="#">Play & Eclipse</a></li>
										<li><a href="#">Creer sa premiere application</a></li>
																	
									</ul>
								</div>	
									
							</div>
						</div>
						<hr>
						<div class="row-fluid">
							<div class="span12">
								<div class="span8"  style="padding-left:50px;">
									<a href="#">Terms of Service</a>    
									<a href="#">Privacy</a>    
									<a href="#">Security</a>
								</div>
								
							</div>
						</div>
			  </div>
    	</div>
		
		
		
		
    </body>
</html>
